<template>
  <div class="main_body1">
    <!-- <div class="header" wx:if="{{appVersion}}"> -->
    <div class="container_top">
      <div class="selectDate">
        <div class="picker_txt">
            <input id="nowmonth" type="month" v-model="date" min="2021-01" max="2021-05" @change="bindDateChange()" />
          </div>
      </div>
      <div class="_main">
        <span class="_left">本月已提现金额</span>
        <span class="_right" v-if="tixianSuccessSumMoney">{{tixianSuccessSumMoney}} 元</span>
        <span class="_right" v-if="!tixianSuccessSumMoney">0 元</span>
      </div>
    </div>
    <div class="header" v-if="!tixianList || tixianList == ''">
      <span style="font-weight:bolder;color:#49ccc3;">暂无数据~</span>
    </div>
    <!-- 静态 -->
    <!-- <div>
      <div class="card">
        <div class="main">
          <div class="left">
            <span class="text ing">静态-提现中</span>
            <span class="date">2020-11-28 15:30:41</span>
          </div>
          <div class="money ing">+0.35</div>
        </div>
      </div>
      <div class="card">
        <div class="main">
          <div class="left">
            <span class="text success">静态-成功提现0.35元</span>
            <span class="date">2020-11-30 15:30:41</span>
          </div>
          <div class="money success">+0.35</div>
        </div>
      </div>
      <div class="card">
        <div class="main">
          <div class="left">
            <span class="text fail">提现失败</span>
            <span class="date">2020-11-30 15:30:41</span>
          </div>
          <div class="money fail">+0.35</div>
        </div>
      </div>
    </div> -->
    <!-- 静态 -->

    <!-- <div wx:for="{{tixianList1}}" wx:key="index" wx:if="{{tixianSuccessSumMoney}}"> -->

    <!-- 暂时注释 -->
    <div v-for="(item, index) in tixianList" :key="index">
      <div class="card">
        <div class="main">
          <div class="left">
            <span class="text ing" v-if="item.status == 0">提现中</span>
            <span class="text success" v-if="item.status == 1">成功提现 {{item.tixianMoney}} 元</span>
            <span class="text fail" v-if="item.status == 2">提现失败</span>
            <span class="date">{{item.dateView}}</span>
          </div>
          <div class="right">
            <div class="money ing" v-if="item.status == 0">+{{item.tixianMoney}}</div>
            <div class="money success" v-if="item.status == 1">+{{item.tixianMoney}}</div>
            <div class="money fail" v-if="item.status == 2">+{{item.tixianMoney}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 暂时注释 -->
    <div class="footer">
      <span class="dibu">- 到底啦 -</span>
    </div>
  </div>
</template>
<script>
var utils = require("../../utils/utils");
var baseConfig = require("../utils/baseConfig");

export default {
  name: 'kstoWithdrawalHistory',
  data() {
    return {
      date: '',
      tixianSuccessSumMoney: '',
      tixianList: [], 
      // tixianList1: [{
      //   dateView: '2020-11-30 15:30:41',
      //   tixianMoney: 66,
      //   status: 0,
      // }, {
      //   dateView: '2021-01-30 15:30:41',
      //   tixianMoney: 68,
      //   status: 1,
      // }, {
      //   dateView: '2021-02-14 15:30:41',
      //   tixianMoney: 88,
      //   status: 2,
      // }],
      is_weixin: '2',
    };
  },
  created() {
    this.getDateData();
  },
  methods: {
    bindDateChange(){
      console.log('选中月份',this.$data.date);
      let list = this.$data.date.split('-');
      let year = list[0];
      let month = list[1];
      this.getMonthFirstLastDay(year, month);
    },
    getData() {
      // let data = this.earningsList.map(r => r.day)
      // console.log(data);
      // let loginUserId = 'ohI6C4tTiL0skHDt-FaRfOnBMkI0';
      let loginUserId = JSON.parse(localStorage.getItem('userInfo')).openid;
      let uid = JSON.parse(localStorage.getItem('userInfo')).id;
      this.$http.post(`${baseConfig.url}tuiwaApp/get_tixian_record_list?loginUserId=` + loginUserId
        + '&uid=' + uid
        + '&start_time=' + this.start_time
        + '&end_time=' + this.end_time
        + '&is_weixin=' + this.is_weixin
      )
        .then(
          res => {
            console.log(res.data.data);
            this.tixianSuccessSumMoney = res.data.data.tixianSuccessSumMoney
            this.tixianList = res.data.data.tixianList
          }
        )
        .catch(
          err => {
            console.log(err);
          }
        )
    },
    get_tixian_record_list() {

    },
    getDateData() { // 进入页面默认年月
      var timestamp = Date.parse(new Date());
      var date = new Date(timestamp);
      var Y = date.getFullYear(); // 获取年 
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); // 获取月
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); // 获取日
      const yearMonth = Y + '-' + M;
      // console.log(yearMonth);
      this.yearMonth = yearMonth
      this.date = yearMonth
      this.year = Y
      this.month = M
      this.day = D
      this.getMonthFirstLastDay(Y, M)
    },
    getMonthFirstLastDay(year, month) {
      var firstDay = new Date(year, month - 1, 1); //这个月的第一天
      var currentMonth = firstDay.getMonth(); //取得月份数
      var lastDay = new Date(firstDay.getFullYear(), currentMonth + 1, 0); //是0而不是-1
      let start_time = utils.formatDate(firstDay, 'yyyy-mm-dd')
      let end_time = utils.formatDate(lastDay, 'yyyy-mm-dd')
      this.start_time = start_time;
      this.end_time = end_time;
      console.log('start_end_time', this.yearMonth, this.start_time, this.end_time)
      this.getData();
    },
  },
}
</script>
<style scoped lang="css">
.container_top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* padding: 10px; */
  border-bottom: 1px solid #4B4E5A;
  height: 60px;
}

.selectDate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 5px;
  background-color: #fff;
  padding: 0 10px;
  height: 25px;
  margin-top: 12px;
}

/* --------------------header---------------------- */
.card {
  width: 95%;
  background: #FFFFFF;
  min-height: 100px;
  border-radius: 8px;
  margin: 10px 2.5%;
  display: flex;
  flex-direction: column;
  border: 1px solid #bbb;
  text-align: left;
}

.main {
  display: flex;
  justify-content: space-between;
  padding: 5px 28px;
}

._main {
  display: flex;
  flex-direction: row;
  position: absolute;
  right: 3%;
  height: 50px;
  line-height: 50px;
}

._main ._left {
  color: #49ccc3;
}

._main ._right {
  /* 超过十万元时调整宽度140rpx */
  /* width: 140rpx; */
  width: 50px;
  margin-left: 5px;
  color: #19A918;
  display: flex;
  flex-direction: row;
}

._right text {
  width: 20px;
  text-align: center;
}

.header {
  margin: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer .dibu {
  color: #7E8084;
  position: absolute;
  bottom: 10px;
}

.text {
  font-weight: 400;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.main .left {
  display: flex;
  flex-direction: column;
  /* margin-top: 5px; */
  /* margin-left: 58rpx; */
}

.money {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  line-height: 100px;
  /* font-weight: bold; */
  /* margin: 44rpx 18px 0 0; */
}

.date {
  font-weight: 500;
  font-size: 10px;
  color: #92808F;
}

.success {
  color: #49ccc3;
}

.ing {
  color: orange;
}

.fail {
  color: red;
}

.picker_txt {
  color: #bbb;
  font-size: 12px;
}
</style>